 |
 Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
|
|
Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
|
Figura: Navegador Mosaic 1990
Fonte: Parece pouco intuitivo, mas, na época, era revolucionário (Divulgação: NCSA)
Observações: Para aprofundamento:
Os padrões HTML5 e CSS do W3C são os pilares tecnológicos sobre os quais todas as páginas Web são construídas.
| Tag | Tipo | Descrição |
|---|---|---|
| < b > | estilo | Formata o texto em negrito. |
| < i > | estilo | Formata o texto em itálico. |
| < em > | semântico | Efatiza o texto, colocando o texto em itálico. |
| < strong > | semântico | Dá uma importância ao texto, colocando o texto em negrito. |
Figura: Exemplo1 de layout com as disposições das tags HTML semânticas
Fonte: Autoria própria
Figura: Exemplo2 de layout com as disposições das tags HTML semânticas
Fonte: Autoria própria
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
<!-- HTML5 em diante -->
<!DOCTYPE html>
<html> <!-- Inicio do HTML -->
<head> <!-- Início do Cabeçalho da Página -->
<meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
<title> Título da Página </title> <!-- Definição do Título da Página -->
</head>
<body> <!-- Início do Corpo do Documento -->
... inserir seu conteúdo aqui ...
</body> <!-- Fim do Corpo do Documento -->
</html> <!-- Fim do HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <!-- Favicon Inserido no Cabeçalho -->
<title> Título da Página </title>
</head>
<body>
... inserir seu conteúdo aqui ...
</body>
</html>
| Medida em: Tag |
px | em |
|---|---|---|
| h1 | 32px | 2em |
| h2 | 24px | 1.5em |
| h3 | 20.8px | 1.3em |
| h4 | 16px | 1em |
| h5 | 12.8px | 0.8em |
| h6 | 11.2px | 0.7em |
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> Título h1: Seção I </h1>
<h2> Título h2: Capítulo I </h2>
<h3> Título h3: Título I </h3>
<h4> Título h4: Subtítulo I </h4>
<h5> Título h5: Subtítulo II </h5>
<h6> Título h6: Subtítulo III </h6>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
<p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
<p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<div> <strong>Divisão 1</strong>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
<div> <strong>Divisão 2 - Dentro da Divisão 1</strong>
<p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
<p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
</div>
</div>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong> e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> Na matemática, ao efetuarmos o cálculo de um número elevado a outro, representamos este cálculo assim: 10<sup>3</sup>, o que significa que estou elevando o número 10 a 3, sendo a mesma coisa que 10 x 10 x 10. </p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> Na química, o símbolo da água é: H<sub>2</sub>O. </p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> <a href="https://bra.ifsp.edu.br">IFSP-BRA</a></p>
<p> <a href="mailto:paulagiancoli@ifsp.edu.br">E-mail Profa.</a></p>
<p> <a href="tel:+551133956789">Ligar para</a></p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE."></p>
</body>
</html>
Saída:
Ou: quando não localiza a imagem, exibe o conteúdo do atributo alt.
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<p>
<h1> IFSP - Bragança Paulista </h1>
<figure>
<img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE.">
<figcaption>Fig.1 - Logo da Disciplina DWE.</figcaption>
</figure>
</p>
</body>
</html>
Saída:
<!DOCTYPE html>
<html>
<head>
<!-- Omitido para facilitar o entendimento -->
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, <del>com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em></del> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
</body>
</html>
Saída:
<!-- Exemplo 1: Inserindo o arquivo de estilo CSS no próprio HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
<style>
... Inserir seu código CSS aqui ...
</style>
</head>
<body>
<!-- Omitido para facilitar o entendimento -->
</body>
</html>
<!-- Exemplo 2: Inserindo o arquivo de estilo CSS como externo ao HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Título da Página </title>
<link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">
</head>
<body>
<!-- Omitido para facilitar o entendimento -->
</body>
</html>
| Formato | Tipo de Seletor | Aplicado em |
|---|---|---|
| a | HTML | Todas as tags especificadas no HTML. |
| .minhaClasse | Classe | Qualquer tag HTML que tenha a Classe especificada. |
| a.minhaClasse | Dependência de Classe | Tag HTML especificada que tenha a Classe especificada. |
| #meuID | Identificadores | Qualquer tag HTML que tenha o ID especificado. |
| a#meuID | Dependência de Identificadores | Tag HTML especificada que tenha o ID especificado. |
| * | Universal | Todas as tags HTML. |
/* Exemplo de Arquivo CSS (estilo.css) */
/* Seletores de HTML */
p {
color: #ff1493;
}
a {
background-color: #ff1493;
}
/* Seletores de Classes */
.rodape {
color: #ff1943;
}
p.rodape {
color: #ff1943;
}
.cabecalho {
background-color: blue;
}
/* Seletores de Identificadores */
#texto {
color: #ff1943;
}
#imagem {
color: #ff1943;
background-color: blue;
}
p#texto {
color: #ff1943;
background-color: black;
}
seletor {
propriedade: valor;
}
h1 {
color: blue;
}
h1 {
color: white;
}
h1 {
color: transparent;
}
h1 {
color: currentColor;
}
h1 {
color: #fff;
}
h1 {
color: rgb(255, 104, 154);
}
h1 {
color: rgba(255, 104, 154, 0.5);
}
h1 {
color: cmyk(0%, 26%, 99%, 1%);
}
h1 {
color: hsl(16, 65%, 100%);
}
h1 {
color: hsla(16, 65%, 100%, 0.37);
}
Guia passo a passo para se tornar um desenvolvedor frontend moderno: Desenvolvedor Frontend.
Especificação HTTP/2 RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2).
Tutorial - An Introduction to DNS Terminology, Components, and Concepts.
Faça treinamentos Gratuitos.
